<template>
  <div class="a">
    <div class="title">
      <span>红头：</span>
      <div>玉林市气象局</div>
      <div>专题气象服务信息</div>
      <div>2023年1期</div>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="header">
      <span>标题:</span>
      <div>6-6夏季高温专题气象服务</div>
    </div>
    <div class="btns">
      <div class="btn">
        <div>清空内容</div>
        <div>默认内容设置</div>
        <div>保存为默认模板</div>
        <div>最近专题服务产品</div>
      </div>
      <div class="date">
        <span>日期</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="tq">
      <p>天气趋势和影响：</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="tq">
      <p>一周具体预报：</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="gk">
      <p>历年同期概况：</p>
      <div class="one">
        <div><span>时段最高气温</span><el-input></el-input></div>
        <div><span>时段最低气温</span><el-input></el-input></div>
        <div><span>时段平均气温</span><el-input></el-input></div>
      </div>
      <div class="two">
        <div><span>时段最大风速</span><el-input></el-input></div>
        <div><span>时段最小风速</span><el-input></el-input></div>
        <div><span>时段平均风速</span><el-input></el-input></div>
      </div>
      <div class="three">
        <div><span>时段平均降雨量</span><el-input></el-input></div>
        <div><span>时段最小风速</span><el-input></el-input></div>
        <div><span>时段内日最大降雨量</span><el-input></el-input></div>
      </div>
    </div>
    <div class="tq">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>

    <div class="tq">
      <p>针对当前林业状况建议：</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="bottom">
      <div><span>*电话：</span><el-input></el-input></div>
      <div><span>*签发：</span><el-input></el-input></div>
      <el-button type="small">产品生成</el-button>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;

  .title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      color: red;
      font-size: 20px;
    }
    div {
      width: 200px;
      border: 1px solid #ccc;
      height: 20px;
      line-height: 20px;
    }
  }
  .header {
    display: flex;
    align-items: center;
    margin: 10px;
    span {
      font-size: 20px;
      margin-right: 15px;
    }
    div {
      width: 200px;
      border: 1px solid #ccc;
    }
  }
  .btns {
    margin-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .btn {
      display: flex;
      justify-content: space-around;
      margin: 10px;
      div {
        border: 1px solid #ccc;
        padding: 5px;
      }
    }
    .date {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .el-date-editor {
        width: 200px;
      }
    }
  }
  .tq {
    margin: 10px;
  }
  .gk {
    margin: 10px;
    v::deep .el-input {
      width: 200px !important;
    }
    .one,
    .two,
    .three {
      display: flex;
      margin: 5px;
      justify-content: space-around;
      .el-input {
        width: 100px;
      }
      span {
        width: 100px;
        margin-right: 10px;
      }
      div {
        display: flex;
        align-items: center;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 50px;
      }
      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
